const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  mode: 'none',
  // 定义多个打包入口，注意是对象，若是数组则会把多个入口打包到一个文件中
  // entry: {
  //   index: './src/index.js',
  //   album: './src/album/album.js'
  // },
  // 打包按需加载
  entry: {
    main: './src/index.js'
  },
  output: {
    // filename: '[name].bundle.js', // 动态输出文件名，[name]会被替换为入口名称
    // filename: '[name]-[hash].bundle.js',  // hash方法1
    // filename: '[name]-[chunkhash].bundle.js',  // hash方法2
    filename: '[name]-[contenthash:8].bundle.js',  // hash方法3
    path: path.join(__dirname, 'dist'),
  },
  optimization: {
    // 定义多个打包入口
    // splitChunks: {
    //   chunks: 'all' // 自动提取所有公共模块到单独 bundle
    // },
    minimizer: [
      /** terser-webpack-plugin 2.2.1 版本可写为如下形式 **/
      new TerserWebpackPlugin(), // js 压缩器
      /**
       * terser-webpack-plugin 5.0.3 版本需注意以下几点
       * 1. output 中的 path 必有
       * 2. 
       */
      new OptimizeCssAssetsWebpackPlugin() // 配置到 minimizer 中，只会当 minimizer 开启时才会使用
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader', // 将样式通过 style 标签注入
          MiniCssExtractPlugin.loader, // 会提取 css 文件，以 link 的形式引入
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 定义多个打包入口
    // new HtmlWebpackPlugin({
    //   title: 'Multi Entry',
    //   template: './src/index.html',
    //   filename: 'index.html',
    //   chunks: ['index'] // 指定每个 html 使用的 bundle
    // }),
    // new HtmlWebpackPlugin({
    //   title: 'Multi Entry',
    //   template: './src/album.html',
    //   filename: 'album.html',
    //   chunks: ['album']
    // })
    // 打包按需加载
    new HtmlWebpackPlugin({
      title: 'Dynamic import',
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      // filename: '[name]-[hash].bundle.css' // hash方法1
      // filename: '[name]-[chunkhash].bundle.css', // hash方法2
      filename: '[name]-[contenthash:8].bundle.css' // hash方法3
    })
    // new OptimizeCssAssetsWebpackPlugin() // 配置到 plugins 中，这个插件在任何时候都会用
  ]
}
